<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据监测总结</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>学生信息</h1>
            <button @click="student.age++">年龄+1</button><br/>
            <button @click="addSex">添加性别，默认：男</button><br/>
            <button @click="student.sex = '女'">修改性别为女</button><br/>
            <button @click="addFriend">添加朋友</button><br/>
            <!-- 证明数组里面的对象的属性也是响应式的，修改数组对象的属性 -->
             <button @click="updateFirstFriendName">修改第一个朋友信息</button><br/>
             <button @click="addHobby">添加一个爱好</button><br/>
             <button @click="updateFirstHobby">修改第一个爱好为开车</button><br/>
             <button @click="removeSmoke">过滤掉爱好中的：抽烟</button><br/>
           <h2>姓名：{{student.name}}</h2>
           <h2>年龄：{{student.age}}</h2>
           <h2 v-if="student.sex">性别：{{student.sex}}</h2>
           <h2>爱好：</h2>
           <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}</li>
           </ul>
           <h2>朋友：</h2>
           <ul>
            <li v-for="(f,index) in student.friedns" :key="index">
                {{f.name}} -- {{f.age}}</li>
           </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            
            const vm = new Vue({
                el:'#root', 
                data:{ 
                    student:{
                        name:'张三',
                        age:18,
                        hobby:['抽烟','喝酒','烫头'],
                        friedns:[
                            {name:'jerry',age:35},
                            {name:'tom',age:36}
                        ]
                    }
                },

                methods: {
                    addSex(){
                        //Vue.set(目标对象，属性，值)
                        //麻烦写法：Vue.set(vm._data.student,'sex','男')
                        //下面两个都可以
                        //Vue.set(this.student,'sex','男')
                        this.$set(this.student,'sex','男')
                    },
                    addFriend(){
                        this.student.friedns.unshift({name:'jack',age:37})
                    },
                    updateFirstFriendName(){
                        this.student.friedns[0].name = '张三'
                        this.student.friedns[0].age = 18
                    },
                    addHobby(){
                        this.student.hobby.push('学习')
                    },
                    updateFirstHobby(){
                        //方式一：splice:从下标0开始删除1个，包括下标0，然后在这个位置插入 开车
                        //this.student.hobby.splice(0,1,'开车')
                        //方式二：指定目标数组，修改下标0的数据为 开车2
                        //Vue.set(this.student.hobby,0,'开车2')
                        this.$set(this.student.hobby,0,'开车2')
                    },
                    removeSmoke(){
                        this.student.hobby = this.student.hobby.filter((h)=>{
                            return h !== '抽烟'
                        })
                    }
                },

            })


        </script>

        
    </body>
</html>